import { View, Image, Text } from "@tarojs/components";
import { useDidShow, makePhoneCall } from "@tarojs/taro";
import { useState } from "react";
import { $route, sg, icons } from "@utils/index";
const Mine = () => {
  const [userInfo, setUserInfo] = useState<UserInfo>();
  useDidShow(() => {
    const userInfo = sg.getValue("userInfo") as UserInfo;
    if (userInfo?.phone) {
      setUserInfo(userInfo);
    }
  });
  const login = () => {
    if (userInfo?.phone) {
      sg.remove("userInfo");
      sg.remove("token");
      setUserInfo(undefined);
    } else {
      $route({
        url: "/pages/mine/login",
      });
    }
  };
  function service() {
    makePhoneCall({ phoneNumber: "18180516009" });
  }

  return (
    <View className="grid grid-rows-[fit-content(200px),1fr,fit-content(200px)] h-screen">
      <View className="flex items-center p-[30px]">
        <Image
          src={icons.logoIcon}
          className="w-[140px] h-[140px] rounded-full flex-none mr-[20px]"
        />
        <View className="grow">
          {userInfo?.phone ? (
            <>
              <View className="text-[36px] font-bold mb-[15px]">
                {userInfo?.user_name}
              </View>
              <View className="text-[30px] text-[#666]">
                {userInfo?.user_name != userInfo?.phone ? userInfo?.phone : ""}
              </View>
            </>
          ) : (
            <View
              onClick={$route.bind(null, { url: "/pages/mine/login" })}
              className="text-[36px] font-bold mb-[15px]"
            >
              请登录
            </View>
          )}
        </View>
      </View>
      <View className="m-[30px]">
        <View
          onClick={$route.bind(null, {
            url: "/pages/mine/frequentlyAskedQuestions",
          })}
          className="flex items-center text-[#666] text-[30px] p-[30px] pl-0 pr-0 border-0 border-b border-b-[#e5e5e5] border-solid"
        >
          <View className="grow">常见问题</View>
          <View className="flex-none">&gt;</View>
        </View>
        <View
          onClick={service}
          className="flex items-center text-[#666] text-[30px] p-[30px] pl-0 pr-0 border-0 border-b border-b-[#e5e5e5] border-solid"
        >
          <View className="grow">客服中心</View>
          <View className="flex-none">&gt;</View>
        </View>
      </View>
      <View
        onClick={login}
        className="h-[90px] mt-[200px] mb-[80px] ml-[30px] mr-[30px] rounded-[50px] rui-flex-cc text-[#666] text-[30px] border border-[#333] border-solid"
      >
        {userInfo?.phone ? <Text>退出登录</Text> : <Text>登录</Text>}
      </View>
    </View>
  );
};
export default Mine;
